<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <PageLayout :navbarShow="false">
    <scroll-view class="wrap" scroll-y>
      <view class="statusBar" :style="{ height: `${statusBarHeight}px` }"></view>
      <!--顶部栏-->
      <view class="top-box">
        <view class="top-box-left">
          <image
            src="../../static/logo.png"
            style="width: 40rpx; height: 40rpx; margin-right: 6px"
          ></image>
          <view style="font-size: 30rpx">基遇仓管</view>
        </view>
        <view class="top-box-right">
          <!-- <wd-icon name="notification" size="18px"></wd-icon> -->
        </view>
      </view>
      <!--内容栏-->
      <view class="top-content">
        <wd-row>
          <wd-col :span="8">
            <view class="top-content-title">持有总资产</view>
            <view class="top-content-desc">
              <wd-count-to
                prefix="￥"
                :startVal="0"
                :decimals="2"
                :endVal="countData.totalZc"
                :fontSize="16"
              ></wd-count-to>
              <!-- <text class="top-content-desc-pre">￥</text> -->
              <!-- <text>{{ countData.totalZc.toFixed(2) }}</text> -->
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="top-content-title">持有收益</view>
            <view class="top-content-desc">
              <wd-count-to
                prefix="￥"
                :startVal="0"
                :decimals="2"
                :endVal="countData.totalSy"
                :fontSize="16"
              ></wd-count-to>
              <!-- <text class="top-content-desc-pre">￥</text>
              <text>
                {{ countData.totalSy.toFixed(2) }}
              </text> -->
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="top-content-title">持有收益率</view>
            <!-- <view class="top-content-desc">
              {{
                countData.holdCost === 0
                  ? '0'
                  : ((countData.totalSy / countData.holdCost) * 100).toFixed(2)
              }}%
            </view> -->
            <wd-count-to
              suffix="%"
              :startVal="0"
              :decimals="2"
              :endVal="
                countData.holdCost === 0 ? 0 : (countData.totalSy / countData.holdCost) * 100
              "
              :fontSize="16"
            ></wd-count-to>
          </wd-col>
        </wd-row>
        <!-- <view class="top-content-msg">
          预警：您共有8只基金处于危险区，请注意风险！大大大电视递四方速递方式的时
        </view> -->
        <view style="margin-top: 20rpx">
          <wd-notice-bar
            text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息"
            prefix="warn-bold"
            color="#92a6b5"
            background-color="#edf8fd"
          />
        </view>
      </view>

      <!--统计栏-->
      <view class="count-box">
        <wd-row>
          <wd-col :span="24">
            <view class="count-box-tip">提示</view>
          </wd-col>
          <wd-col :span="6">
            <view class="count-box-num">6</view>
            <view class="count-box-desc">账户数</view>
          </wd-col>
          <wd-col :span="6">
            <view class="count-box-num">6</view>
            <view class="count-box-desc">持有数</view>
          </wd-col>
          <wd-col :span="6">
            <view class="count-box-num">6</view>
            <view class="count-box-desc">加仓中</view>
          </wd-col>
          <wd-col :span="6">
            <view class="count-box-num">6</view>
            <view class="count-box-desc">减仓中</view>
          </wd-col>
        </wd-row>
      </view>

      <!--菜单栏-->
      <view class="menu">
        <view
          class="menu-item"
          v-for="(menu, index) in menuList"
          :key="index"
          @click="onClickMenu(menu)"
          v-show="menu.show"
        >
          <view class="menu-img">
            <image :src="menu.icon" class="menu-img-src"></image>
          </view>
          <view class="menu-title">{{ menu.name }}</view>
        </view>
      </view>

      <!--行情滚动-->
      <view class="trend">
        <view class="trend-top">
          <view class="trend-top-title">行情播报</view>
          <view class="trend-top-view">查看详情</view>
        </view>

        <view class="trend-item">
          <wd-row>
            <wd-col :span="8" v-for="i in 9" :key="i">
              <view class="item">
                <view class="item-name">上证指数</view>
                <view class="item-num">3374.69</view>
                <view>
                  <text>-0.18</text>
                  <text>-0.10%</text>
                </view>
              </view>
            </wd-col>
          </wd-row>
        </view>
      </view>
    </scroll-view>
    <!--提示挂载点-->
    <wd-toast />
  </PageLayout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useToast } from 'wot-design-uni'
import { http } from '@/utils/http'
defineOptions({
  name: 'home',
  options: {
    styleIsolation: 'shared',
  },
})
const globalData = getApp().globalData
const { systemInfo, navHeight } = globalData
const { statusBarHeight } = systemInfo
// 提示
const toast = useToast()
// 统计数据
const countData = ref<any>({})
// 首页菜单列表
const menuList = ref([
  {
    name: '账户管理',
    icon: '../../static/home/account.png',
    path: '/pages/hold/hold',
    isTabbar: true,
    show: true,
  },
  {
    name: '自选区域',
    icon: '../../static/home/select.png',
    path: '/pages/choose/choose',
    isTabbar: true,
    show: true,
  },
  { name: '交易记录', icon: '../../static/home/trade.png', path: '', isTabbar: false, show: false },
  { name: '大盘行情', icon: '../../static/home/dp.png', path: '', isTabbar: false, show: false },
  {
    name: '个人中心',
    icon: '../../static/home/me.png',
    path: '/pages/user/people',
    isTabbar: true,
    show: true,
  },
  {
    name: '加仓中心',
    icon: '../../static/home/rank.png',
    path: '/pages/rank/rank',
    isTabbar: false,
    show: true,
  },
  { name: '收益分析', icon: '../../static/home/fx.png', path: '', isTabbar: false, show: false },
  {
    name: '会员中心',
    icon: '../../static/home/member.png',
    path: '',
    isTabbar: false,
    show: false,
  },
  { name: '定投工具', icon: '../../static/home/tool.png', path: '', isTabbar: false, show: false },
  { name: '聊天社区', icon: '../../static/home/talk.png', path: '', isTabbar: false, show: false },
])
// 点击跳转
const onClickMenu = (menu) => {
  // 如果地址为空，则提示
  // toast.show('提示信息')
  if (menu.path === '') {
    toast.show('提示信息')
    return false
  }
  if (menu.isTabbar) {
    // 属于tabbar，无法返回
    uni.switchTab({
      url: menu.path,
    })
  } else {
    // 正常页面跳转
    uni.navigateTo({
      url: menu.path,
    })
  }
}

// 加载统计数据
const loadCount = () => {
  http.get('/sys/fund/hold/findDetailCount', { groupId: '' }).then((res: any) => {
    if (res.success) {
      countData.value = res.result
    }
  })
}

onShow(() => {
  loadCount()
})
</script>

<style lang="scss" scoped>
.wrap {
  position: relative;
  z-index: 1000;
  padding: 10px 20px;
  // background: linear-gradient(to bottom, #daf0fe, #f9fbfb);
  background-image: url(../../static/home/bg.png);
  background-size: 100% 100%;
  .top-box {
    display: flex;
    justify-content: space-between;
    padding: 16rpx 0px;
    margin-bottom: 16px;
    .top-box-left {
      display: flex;
      font-size: 36rpx;
      font-weight: 600;
      align-items: center;
    }
  }
  .top-content {
    text-align: center;
    .top-content-title {
      color: #92a6b5;
      z-index: 200;
      position: relative;
      margin-bottom: 8rpx;
      font-size: 24rpx;
    }
    .top-content-desc {
      color: #000;
      font-weight: 600;
      font-size: 30rpx;
      z-index: 200;
      position: relative;
      .top-content-desc-pre {
        font-size: 24rpx;
      }
    }
    .top-content-msg {
      margin-top: 10px;
      background-color: #edf8fd;
      padding: 6px 10px;
      border-radius: 8px;
      z-index: 200;
      position: relative;
      opacity: 0.8;
      white-space: nowrap;
      overflow: auto;
      text-overflow: ellipsis;
      font-size: 24rpx;
    }
  }
  .count-box {
    background: linear-gradient(to bottom, #3b82ec, #458bf6);
    position: relative;
    z-index: 200;
    margin-top: 20px;
    text-align: center;
    padding: 10px 0px;
    border-radius: 10px;
    color: #fff;
    opacity: 0.8;
    .count-box-tip {
      width: 95%;
      margin: 5px auto;
      padding: 5px 10px;
      border-radius: 8px;
      background-color: #4d8bee;
      text-align: left;
    }
  }
  .menu {
    margin: 15px 0px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    .menu-item {
      // flex-grow: 1;
      flex-basis: calc(100% / 5);
      margin-bottom: 20rpx;
      .menu-img-src {
        width: 56rpx;
        height: 56rpx;
        margin: 0 auto;
      }
      .menu-title {
        font-size: 26rpx;
        margin-top: 8rpx;
      }
    }
  }
  .trend {
    background: linear-gradient(to bottom, #f2f5ff, #fdfeff);
    box-shadow: 2px 2px 2px 2px white;
    padding: 10px;
    border-radius: 10px;
    .trend-top {
      display: flex;
      justify-content: space-between;
      .trend-top-title {
        font-size: 30rpx;
        font-weight: 600;
      }
      .trend-top-view {
        color: #9b9eb1;
      }
    }
    .trend-item {
      text-align: center;
      .item {
        margin: 8px 0px;
        .item-name {
          font-weight: 600;
        }
      }
    }
  }
}
</style>
